<template>
  <div v-if="showWrap" id="zh-share" class="wrap" :class="showContent ?'fadein':'fadeout'" @touchmove.prevent @click="close">
    <div class="content">
      <div class="guide">
        <img src="~@/static/images/guide_line.png" alt="">

      </div>
      <div class="body">
        <div class="wraper">
          <div class="title">
            点击右上角
          </div>
          <div class="text">
            <span>
              分享给朋友
            </span>
            <img src="~@/static/images/wo.png" alt="">
             
            <span>
              或
            </span>
            <span>
              分享到朋友圈
            </span>
            <img src="~@/static/images/pengyouquan.png" alt="">
              
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { showShare } from '~/components/share/index'
export default {
  data() {
    return {

    }
  },

  methods: {
    close() {
      showShare('close')
    }
  }
}
</script>

<style lang="less" scoped>
 .wrap{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(0,0,0,0.2);
    z-index: 8000;
    display: flex;
    justify-content: center;
    z-index: 10000000;
    .fadein {
      animation: animate_in 0.1s;
    }
    .fadeout {
      animation: animate_out 0.1s;
      opacity: 0;
    }
    @keyframes animate_in {
      0% {
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    @keyframes animate_out {
      0% {
        opacity: 1;
      }
      100%{
        opacity: 0;
      }
    }

    .content {
      width: 100%;
      .guide {
        text-align: right;
        margin-right: 0.5rem;
        margin-top: 0.3rem;
        img {
          width: 1.33rem;
          height: 1.48rem;
        }
      }
      .body {
        width: 100%;
        display: flex;
        justify-content: center;
        .wraper {
          width: 100%;
          margin: 0.45rem 0.75rem;
          background:rgba(255,255,255,1);
          border-radius:0.2rem;
          padding: 0.35rem 0.48rem;
          .title {
            height:0.48rem;
            font-size:0.34rem;
            font-weight:600;
            color:rgba(34,34,34,1);
            line-height:0.48rem;
          }

          .text {
            margin-top: 0.2rem;
            height:0.4rem;
            font-size:0.28rem;
            font-weight:400;
            color:rgba(34,34,34,1);
            line-height:0.4rem;
            display: flex;
            align-items: center;
            img {
              margin: 0 0.15rem;
              width: 0.4rem;
              height: 0.4rem;
            }
          }
        }

      }

    }
 }

</style>
